<template>
<div class="swiper">
	<swiper :options="swiperOption">
		<swiper-slide v-for="item in list" :key="item.id">
			<img class="swiper-img" :src="item.imgUrl" alt="">
		</swiper-slide>
		<div class="swiper-pagination" slot="pagination"></div>
	</swiper>
</div>
	
</template>
<script>
export default{
	props:{
				list:Array
			},
	data(){
		return{
			swiperOption:{
				pagination:'.swiper-pagination',
				autoplay:3000,
				loop:true
			}
			
		}
	}
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/base.scss';

.swiper{
	overflow: hidden;
	width:100%;
	height:0;
	background: #eee;
	padding-bottom:31.25%;

}
.swiper-img{
	width:100%;
}

</style>